/* Estilos globales */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
	font-family: 'Courier New', Courier, monospace;
	font-style: normal;
}


body {
    font-size: 16px;
    line-height: 1.5;
    color: black;
    height: 100vh; /* Asegura que el body ocupe toda la altura de la pantalla */
    overflow: hidden; /* Desactiva el scroll */
    display: flex;
    flex-direction: column;
}

.body-inicio {
    background-image: url("./img/img-background-inicio.jpg");
    background-repeat: no-repeat;
    background-position: center center; /* Centra la imagen */
    background-attachment: fixed; /* Fija la imagen al fondo */
    background-size: cover; /* Asegura que cubra toda la pantalla */
    height: 100vh; /* Asegura que ocupe el 100% de la pantalla */
    overflow: hidden; /* Desactiva el scroll */
}

.body-proy {
    background-image: url("./img/img-background-proy.png");
    background-repeat: no-repeat;
    background-position: center center; /* Centra la imagen */
    background-attachment: fixed; /* Fija la imagen al fondo */
    background-size: cover; /* Asegura que cubra toda la pantalla */
    height: 100vh; /* Asegura que ocupe el 100% de la pantalla */
    #overflow: hidden; /* Desactiva el scroll */
	text-align:center;
}




.special-elite-aa {
  font-family: "Special Elite", serif;
  font-weight: 500;
  font-style: normal;
  font-size: 25px;
}

.proyectos-element{
  font-family: "Special Elite", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 22px;
}


.name-titulo{
    width: 100%;
    display: flex;
    justify-content: center; /* Centra horizontalmente */
    align-items: flex-start; /* Alinea verticalmente al inicio */
    padding-top: 20px; /* Ajusta el espacio desde la parte superior */
    position: relative;
}

/* Barra de navegación */
.navegacion {
    width: 100%;
    padding: 10px 0; /* Añadir algo de padding para separar el nav del contenido */
}

/* Estilo general del carrusel */
.carousel {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden; /* Ocultar lo que esté fuera de la vista */
}

/* Contenedor de las imágenes */
.slider-container {
    display: flex;
    width: 300%; /* 100% por cada imagen (tres imágenes) */
    height: 100%;
    transition: transform 1s ease; /* Transición suave para el deslizamiento */
    scroll-snap-type: x mandatory; /* Para un desplazamiento suave con alineación */
}

/* Cada imagen del carrusel */
.slider-item {
    width: 100%; /* Cada imagen ocupa el 100% del contenedor */
    height: 100%;
    object-fit: cover; /* Mantiene la relación de aspecto de la imagen */
    scroll-snap-align: center; /* Alineación de las imágenes al hacer scroll */
}

/* Estilo de los botones */
.carousel-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5); /* Fondo oscuro para los botones */
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    font-size: 30px;
    z-index: 10;
}        
/* Aquí puedes aplicar la fuente a tus elementos */
.special-elite-regular {
	font-family: 'Special Elite', cursive;
}



.carousel {
	position: relative;
	left: 50%;
	width: 30%;
	height: 50vh;
	overflow: hidden;
}

.slider-container {
	position: absolute;
	display: flex;
	width: 100%; /* 100% por cada imagen (tres imágenes) */
	height: 100%;
	transition: transform 1s ease;
}

.slider-item {
	width: 100%; /* Cada imagen ocupa el 100% del contenedor */
	height: 100%;
	object-fit: cover;
}

.carousel-button {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background-color: rgba(0, 0, 0, 0.5);
	color: white;
	border: none;
	padding: 10px;
	cursor: pointer;
	font-size: 30px;
	z-index: 10;
}

.prev {
	left: 10px;
}

.next {
	right: 10px;
}

.carousel-button:hover {
	background-color: rgba(0, 0, 0, 0.8);
}

.carousel-button.prev {
    left: 10px;
}

.carousel-button.next {
    right: 10px;
}

.carousel-button:hover {
    background-color: rgba(0, 0, 0, 0.8); /* Fondo más oscuro al pasar el ratón */
}

.about-ul{
	padding-left: 3%;
	padding-bottom: 15px;
}

.body-about{
	background-image: url("./img/img-background.jpg");
    background-repeat: no-repeat;
    background-position: center center; /* Centra la imagen */
    background-attachment: fixed; /* Fija la imagen al fondo */
    background-size: cover; /* Asegura que cubra toda la pantalla */
	font-family: 'Courier New', Courier, monospace;
	font-style: normal;
}

/* Contenedor principal de la sección sobre mí */
#sobre-mi {
    overflow: scroll;
    height: 100vh; /* Asegura que ocupe el 100% de la pantalla */
}

/* Estilo personalizado para la barra de desplazamiento en navegadores modernos */
#sobre-mi::-webkit-scrollbar {
    width: 8px; /* Ancho de la barra de desplazamiento */
}

#sobre-mi::-webkit-scrollbar-thumb {
    background-color: #888; /* Color del "pulgar" de la barra de desplazamiento */
    border-radius: 4px;     /* Bordes redondeados */
}

#sobre-mi::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* Color cuando se pasa el ratón por encima */
}

#sobre-mi::-webkit-scrollbar-track {
    background-color: #f1f1f1; /* Color del fondo de la barra */
    border-radius: 4px;        /* Bordes redondeados */
}

/* Contenedor principal de la sección sobre mí */
#sobre-mi-description {
    display: flex;
    align-items: center; /* Centra verticalmente los elementos dentro del contenedor */
    justify-content: space-between; /* Deja espacio entre los elementos */
	padding-left: 15%;
	padding-bottom: 20px;
	font-family: "Special Elite", serif;
	font-weight: 400;
	font-style: normal;
}

.sobre-mi-puntos{
	padding-left: 10%;
}

/* Estilo para la imagen */
.about-img {
    width: 20%; /* La imagen ocupará el 30% del contenedor */
    object-fit: cover; /* Hace que la imagen se ajuste sin deformarse */
}

/* Estilo para la descripción */
.about-description {
    width: 70%; /* La descripción ocupará el 70% del contenedor */
    padding-left: 20px; /* Deja un pequeño espacio entre la imagen y la descripción */
    padding-right: 10%; /* Deja un pequeño espacio entre la imagen y la descripción */
	font-size: 18px;
    line-height: 1.8;
    color: #555;
}

.scrollable {
    overflow: scroll;
	overflow-x: hidden;
	align-items: center;
    height: 100vh; /* Asegura que ocupe el 100% de la pantalla */
}

/* Estilo personalizado para la barra de desplazamiento en navegadores modernos */
.scrollable::-webkit-scrollbar {
    width: 8px; /* Ancho de la barra de desplazamiento */
}

.scrollable::-webkit-scrollbar-thumb {
    background-color: #888; /* Color del "pulgar" de la barra de desplazamiento */
    border-radius: 4px;     /* Bordes redondeados */
}

.scrollable::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* Color cuando se pasa el ratón por encima */
}

.scrollable::-webkit-scrollbar-track {
    background-color: #f1f1f1; /* Color del fondo de la barra */
    border-radius: 4px;        /* Bordes redondeados */
}

.body-corbiere{
	background-image: url("./img/img-background.jpg");
	background-size: cover;
	text-align: center;
	color: white;
}

.boxbox{
	border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

.recorte-imagen{
	width: 100%;       /* Ancho del contenedor donde se recorta la imagen */
    height: 50px;      /* Alto del contenedor */
    position: relative; /* Para controlar el posicionamiento de la imagen dentro del contenedor */
	padding-bottom: 75px;
}

.recorte-imagen img {
    width: 75%;        /* La imagen ocupará el 100% del contenedor */
    height: auto;       /* Mantiene la proporción de la imagen */
    position: absolute; /* Permite mover la imagen dentro del contenedor */
    top: -50px;         /* Ajusta la posición de la imagen hacia arriba (recorta la parte superior) */
    left: 170px;        /* Ajusta la posición de la imagen hacia la izquierda (recorta el lado derecho) */
}

.amanecia {
    display: block;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

.amanecia-text{
	padding-left: 10%;
	padding-top: 7.5%;
	padding-right: 15%;
	text-align: justify;
}

/* Barra de navegación */
nav {
    padding: 0px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
}

nav ul {
    display: flex;
    justify-content: center;
    list-style-type: none;
}

nav li {
    margin: 0 20px;
}

nav a {
    color: #000;
    text-decoration: none;
    font-size: 18px;
    transition: color 0.3s ease;
    padding: 10px 100px;
}

nav a:hover {
    color: #A2866F; /* Marrón claro */
}

/* Secciones */
.section {
    padding: 80px 20px;
    text-align: center;
}


h2 {
    font-size: 36px;
    margin-bottom: 20px;
    font-weight: bold;
}

h3 {
    font-size: 28px;
    margin-bottom: 15px;
    color: #4B3A3A;
}

ul {
    list-style-type: none;
    padding-left: 0;
}

ul li {
    font-size: 18px;
    line-height: 1.8;
    color: #555;
}


footer {
    text-align: center;
    padding: 20px;
    background-color: #4B3A3A; /* Marrón oscuro */
    color: #fff;
    width: 100%;
}

/* Carrusel */
.carousel-inner img {
    height: 400px;
    object-fit: cover;
    border-radius: 8px;
}

.carousel-caption {
    background-color: rgba(0, 0, 0, 0.5);
    padding: 10px;
    border-radius: 8px;
}

.carousel-caption h5 {
    font-size: 24px;
    font-weight: bold;
}

.carousel-caption p {
    font-size: 18px;
}

/* Formulario de Contacto */
form {
    max-width: 600px;
    margin: 0 auto;
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

form label {
    font-size: 18px;
    color: #4B3A3A;
}

form input, form textarea {
    width: 100%;
    padding: 12px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    color: #555;
}

form input[type="submit"] {
    background-color: #4B3A3A; /* Marrón oscuro */
    color: #fff;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

form input[type="submit"]:hover {
    background-color: #D8C7B9; /* Marrón claro */
}

/* Enlaces */
a {
    color: #4B3A3A;
    text-decoration: none;
}

a:hover {
    color: #D8C7B9; /* Marrón claro */
}

/* Desplazamiento suave */
html {
    scroll-behavior: smooth;
}

/* Animación de fade-in para las secciones */
.section {
    opacity: 0;
    transition: opacity 1s ease;
}

.section.active {
    opacity: 1;
}
/* Estilos para el icono de la hamburguesa (menú de navegación tipo burger) */
.burger-icon {
    display: none;
    cursor: pointer;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
	margin-left: 10px;
}

.burger-icon .line {
    width: 100%;
    height: 4px;
    background-color: #000;
    border-radius: 5px;
}
/* Ajustes para móviles */
@media (max-width: 768px) {
    /* Navbar */
    nav ul {
        display: none; /* Ocultar los enlaces de navegación de forma predeterminada */
        flex-direction: column; /* Cambiar a una disposición vertical */
        align-items: center;     /* Centrar los elementos */
        position: absolute;
        top: 60px; /* Coloca el menú debajo de la barra de navegación */
        right: 0;
        left: 0;
        background-color: #fff; /* Fondo blanco para el menú desplegable */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra suave para el menú desplegable */
        padding: 20px 0;
    }

    nav ul.active {
        display: flex; /* Mostrar el menú cuando se active */
    }

    nav li {
        margin: 10px 0;
    }

    nav a {
        font-size: 18px; /* Reducir tamaño de la fuente en móviles */
        padding: 15px 30px; /* Aumentar el espaciado para mayor clicabilidad */
    }

    .burger-icon {
        display: flex; /* Mostrar el icono de hamburguesa en dispositivos móviles */
    }

    /* Sección Claudia */
    #claudia {
        padding: 10px;
    }
	
	.special-elite-regular {
	  font-family: "Special Elite", serif;
	  font-weight: 300;
	  font-style: normal;
	}

    .name-titulo h1 {
        font-size: 30px; /* Reducir el tamaño del título en móviles */
    }

    /* Sección Sobre mí */
    #sobre-mi {
        padding: 20px; /* Reducir el padding para móviles */
    }

    .about-ul {
        padding-left: 10px; /* Ajustar el padding de la lista */
		text-align: center;
    }

    .about-ul li {
        font-size: 16px; /* Reducir el tamaño de la fuente en móviles */
    }

    /* Footer */
    footer p {
        font-size: 14px; /* Reducir el tamaño de la fuente en móviles */
    }
	
	.proyectos-list{
		position: absolute;
		text-align: center;
		top: 20%;
		left:25%;
	}
	h1{
		font-size: 35px; 		
	}
	.modelos{
		width:16%;
	}
}


/* Ajustes para móviles */
@media (min-width: 769px) {
	h1{
		font-size: 50px; 		
	}
    
    /* Sección Claudia */
    #claudia {
        padding: 10px;
    }
	
	.special-elite-regular {
	  font-family: "Special Elite", serif;
	  font-weight: 400;
	  font-style: normal;
	}

    .name-titulo h1 {
        font-size: 30px; /* Reducir el tamaño del título en móviles */
    }

    /* Sección Sobre mí */
    #sobre-mi {
        padding: 20px; /* Reducir el padding para móviles */
    }

    .about-ul {
        padding-left: 10px; /* Ajustar el padding de la lista */
		padding-top: 10%;
		text-align: center;
    }

    .about-ul li {
        font-size: 16px; /* Reducir el tamaño de la fuente en móviles */
    }

    /* Footer */
    footer p {
        font-size: 14px; /* Reducir el tamaño de la fuente en móviles */
    }
	
	.proyectos-list{
		position: absolute;
		text-align: center;
		top: 20%;
		left: 45%;
	}
	
	.modelos{
		margin-right: -2.5%;
		width:8%;
	}
}